<template>
  <div>
    <my-header></my-header>
    <div class="school">
      <div class="schoolBanner">
        <img
            src="https://static.zhipin.com/zhipin-geek/v538/web/geek/images/school/banner/top.png"
            alt=""
            width="100%"
            height="180px"
        />
      </div>
      <div class="app">
        <!-- <h3 class="test">测试</h3> -->
        <el-row :gutter="20">
          <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>

          <!-- 头部开始 -->
          <el-col :span="14">
            <div class="grid-content bg-purple wap_center">
              <div
                  class="searchcentent"
                  style="width: 1184px; margin: 0 auto; margin-bottom: 20px"
              >
                <el-col class="btnset">
                  <el-button
                      plain
                      class="btn1"
                      @click="onbtnb('1')"
                      :class="{ btnb: btnb, btnbhover: !btnb }"
                  >找全职</el-button
                  >
                  <el-button
                      plain
                      class="btn2"
                      :class="{ btnb: !btnb, btnbhover: btnb }"
                      @click="onbtnb('2')"
                  >找实习</el-button
                  >
                </el-col>
                <div class="searchBox">
                  <div class="pos">
                    上海<i class="el-icon-caret-bottom"></i>
                  </div>
                  <input class="searchInput" type="text" name="" id="" />
                  <div class="searchBtn">搜索</div>
                </div>
              </div>
            </div>
            <!-- 头部结束 -->
            <!-- 主体内容开始 -->
            <!-- <el-row :span="20" class="banner_center">
          <el-col :span="6">
            <div class="left_center">1111</div>
          </el-col>
          <el-col :span="18">111</el-col>
        </el-row> -->
            <div class="center_wap">
              <div class="center_left">
                <el-tabs
                    v-model="activeName"
                    class="schollTabs"
                    @tab-click="handleClick"
                >
                  <el-tab-pane
                      :label="item.label"
                      :name="item.id"
                      v-for="item in centerleft2"
                      :key="item.id"
                  >
                    <ul v-for="items in item.children" :key="items.title">
                      <li>
                        <a href="#">{{ items.title }}</a>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <!-- <el-tab-pane label="配置管理" name="second">
                <ul v-for="item in centerleft" :key="item.title">
                  <li>
                    <a href="#">{{ item.title }}</a>
                  </li>
                </ul></el-tab-pane
              > -->
                </el-tabs>
              </div>
              <div class="center_center"></div>
              <div class="center_right">
                <!-- 轮播图 -->
                <el-carousel indicator-position="outside" :height="'340px'">
                  <el-carousel-item v-for="item in bannerimg" :key="item">
                    <!-- <h3>{{ item.bannerurl }}</h3> -->
                    <img :src="item.bannerurl" alt="" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <div class="center_wap2">
              <div class="center_wap2-1">
                <h3>校招直播</h3>
              </div>
              <div class="center_wap2-2">
                <el-carousel
                    :interval="5000"
                    arrow="always"
                    :autoplay="false"
                    :height="'455px'"
                >
                  <el-carousel-item
                      v-for="(item, index) in bannerimgurl"
                      :key="index"
                  >
                    <!-- <h3>{{ item }}</h3> -->
                    <div
                        class="center_wap2-2-center"
                        v-for="items in item"
                        :key="items.id"
                    >
                      <div class="wap2_center">
                        <img class="wap2_center" :src="items.banner" alt="" />
                      </div>
                      <div class="wap2_img">
                        <img
                            class="wap2_img"
                            :src="items.img"
                            alt=""
                            title="图片"
                        />
                      </div>
                      <div class="wap2_title">
                        <h5>{{ items.title }}</h5>
                        <p>{{ items.content }}</p>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>

              <div class="remen">
                <div class="remen_1">
                  <h3>热门公司</h3>
                  <el-button plain class="remen_btn">上海</el-button>
                  <el-button plain class="remen_btn">深圳</el-button>
                  <el-button plain class="remen_btn">广州</el-button>
                  <el-button plain class="remen_btn">北京</el-button>
                  <el-button plain class="remen_btn">全国</el-button>
                </div>
                <div class="remen_2">
                  <div
                      class="remen_title"
                      v-for="item in foternav"
                      :key="item.id"
                  >
                    <img class="remen_title" :src="item.img" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <!-- 主体内容结束 -->
          </el-col>
          <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
      </div>
      <!-- <my-header></my-header> -->
      <!-- -------------------------------------------------------- -->
      <!-- <div style="width: 100%; height: 400px; background: yellow">

    </div> -->

      <!-- ------------------------------------------------------------ -->
    </div>

    <!-- <my-footer></my-footer> -->
  </div>
</template>

<script>
import myheader from "@/components/header.vue";
import myfooter from "@/components/footer.vue";

import { getNavData } from "@/api";
export default {
  name: "homePage",
  data() {
    return {
      msg: "这是职位",
      btnb: true,
      bannerimg: {
        title: {
          bannerurl:
              "https://img.bosszhipin.com/static/file/2022/fe8jxaxil21652234567931.jpg",
        },
        title2: {
          bannerurl:
              "https://img.bosszhipin.com/static/file/2021/c00k2zjxpx1637821843865.jpg",
        },
        title3: {
          bannerurl:
              "https://img.bosszhipin.com/static/file/2022/tjnzv3d2nd1652928069941.jpg",
        },
      },
      bannerimgurl: [
        // 这是第一条主层数 数据 ，要求应该有几页轮播图
        [
          // 这里面就是每一条主层数，数据，每一页要生成几个小图
          {
            img: "https://img.bosszhipin.com/beijin/mcs/banner/49297ba4194ed84161c9ca10ce263832cfcd208495d565ef66e7dff9f98764da.jpg",
            title: "新浪网线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083284b4626be5e7106ee164f458e136ee06bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9iYW5uZXIvNDkyOTdiYTQxOTRlZDg0MTYxYzljYTEwY2UyNjM4MzJjZmNkMjA4NDk1ZDU2NWVmNjZlN2RmZjlmOTg3NjRkYS5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsd18xOTIsbGltaXRfMC9yb3VuZGVkLWNvcm5lcnMscl8xOA==,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "岗位策略分析实习生",
            id: "1",
          },
          {
            img: "https://img.bosszhipin.com/beijin/upload/admin/20220629/7a57a5a743894a0e70bb849643abf494f29cfa0f17284835c4b68775e00e99293c389c7e7e3bbb9d.png",
            title: "面试模拟室",
            banner:
                "https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20220707/b93206e5b50f9083e361ed894cdda4adf3265ffcea82a21c42671432b29fa09d711b0b40937ca3fa",
            content: "0个岗位",
            id: "2",
          },
          {
            img: "https://img.bosszhipin.com/beijin/upload/com/logo/20190824/7913990d0137bc69ecd4354db63153d2d0f7c62f2a98eb1b7ef26481c883a4fe.jpg",
            title: "成晟石化线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220624/b93206e5b50f9083e6b7e111439de8ffb95d20bc0cd1150e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL3VwbG9hZC9jb20vbG9nby8yMDE5MDgyNC83OTEzOTkwZDAxMzdiYzY5ZWNkNDM1NGRiNjMxNTNkMmQwZjdjNjJmMmE5OGViMWI3ZWYyNjQ4MWM4ODNhNGZlLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "0个岗位",
            id: "3",
          },
          {
            img: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20180222/97cc79962602c7d81c682170c8ed8db4293382ae35482b6de0ba2b225166f731.jpg",
            title: "2021年文启优思未来校长启动计划",
            banner:
                "https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20210311/e581127a2fd9ee122e0394a6392b0b74-0faa3c809076d30e3006fd1cf1a533d8",
            content: "行政专员/助理等20个岗位",
            id: "4",
          },
          {
            img: "https://img.bosszhipin.com/beijin/upload/com/workfeel/20220331/7bf6f160950405e98b26446373ef29469010778201e71fd77646107e577a94144a7e3e6bd7b70400.jpg",
            title: "万集科技校园招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/tmp/20220629/7ed83c93c56565294d57b1b5af9faba67646107e577a94144a7e3e6bd7b70400.jpg",
            content: "光学工程师(23届校招)等50个岗位",
            id: "5",
          },
          {
            img: "https://c-res.zhipin.com/jrs/c3352e648e5359e2bb3bed3705836ece.jpg",
            title: "柏特科技线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220615/b93206e5b50f9083b2cdddf23a27988352a8e09803d9395b6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL3VwbG9hZC9jb20vbG9nby8yMDIyMDYxNS83YjViNTU0ZDg0Zjk3MjljYjMyYWVhNDk4ZThkOGRmNzNhMGY3NzRmM2QxN2I1NjY2YmI2MWUzYjdiY2UwOTMxZGE1NzRkMTlkMWQ4MmM4OC5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsd18xOTIsbGltaXRfMC9yb3VuZGVkLWNvcm5lcnMscl8xOA==,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "前端开发工程师等2个岗位",
            id: "6",
          },
          {
            img: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20200117/693f94e1e346efc9b2f0eda3529e67a3b1ea43a176b8ca09613fe78b610be53c_s.jpg",
            title: "佑华法律线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220705/b93206e5b50f9083f3d79777902071f12bcb60e764ad24d06bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAyMDAxMTcvNjkzZjk0ZTFlMzQ2ZWZjOWIyZjBlZGEzNTI5ZTY3YTNiMWVhNDNhMTc2YjhjYTA5NjEzZmU3OGI2MTBiZTUzY19zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "见习市场运营等25个岗位",
            id: "7",
          },
          {
            img: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20190729/f56fbce7667fa7eff86b1e8ed5f3cfc7e87192bfc9b589bc11f8a713c1e11684_s.jpg",
            title: "【校招】",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220705/b93206e5b50f90837c7fd7784394ba1bf5996774e12e1e106bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTA3MjkvZjU2ZmJjZTc2NjdmYTdlZmY4NmIxZThlZDVmM2NmYzdlODcxOTJiZmM5YjU4OWJjMTFmOGE3MTNjMWUxMTY4NF9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "注册/QA助理(北京)等15个岗位",
            id: "8",
          },
        ],
        // 这是第二条主层数 数据
        [
          {
            img: "https://img.bosszhipin.com/beijin/mcs/banner/49297ba4194ed84161c9ca10ce263832cfcd208495d565ef66e7dff9f98764da.jpg",
            title: "新浪网线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083284b4626be5e7106ee164f458e136ee06bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9iYW5uZXIvNDkyOTdiYTQxOTRlZDg0MTYxYzljYTEwY2UyNjM4MzJjZmNkMjA4NDk1ZDU2NWVmNjZlN2RmZjlmOTg3NjRkYS5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsd18xOTIsbGltaXRfMC9yb3VuZGVkLWNvcm5lcnMscl8xOA==,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "岗位策略分析实习生",
            id: "1",
          },
          {
            img: "https://img.bosszhipin.com/beijin/upload/admin/20220629/7a57a5a743894a0e70bb849643abf494f29cfa0f17284835c4b68775e00e99293c389c7e7e3bbb9d.png",
            title: "面试模拟室",
            banner:
                "https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20220707/b93206e5b50f9083e361ed894cdda4adf3265ffcea82a21c42671432b29fa09d711b0b40937ca3fa",
            content: "0个岗位",
            id: "2",
          },
          {
            img: "https://img.bosszhipin.com/beijin/upload/com/logo/20190824/7913990d0137bc69ecd4354db63153d2d0f7c62f2a98eb1b7ef26481c883a4fe.jpg",
            title: "成晟石化线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220624/b93206e5b50f9083e6b7e111439de8ffb95d20bc0cd1150e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL3VwbG9hZC9jb20vbG9nby8yMDE5MDgyNC83OTEzOTkwZDAxMzdiYzY5ZWNkNDM1NGRiNjMxNTNkMmQwZjdjNjJmMmE5OGViMWI3ZWYyNjQ4MWM4ODNhNGZlLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "0个岗位",
            id: "3",
          },
          {
            img: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20180222/97cc79962602c7d81c682170c8ed8db4293382ae35482b6de0ba2b225166f731.jpg",
            title: "2021年文启优思未来校长启动计划",
            banner:
                "https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20210311/e581127a2fd9ee122e0394a6392b0b74-0faa3c809076d30e3006fd1cf1a533d8",
            content: "行政专员/助理等20个岗位",
            id: "4",
          },
          {
            img: "https://img.bosszhipin.com/beijin/upload/com/workfeel/20220331/7bf6f160950405e98b26446373ef29469010778201e71fd77646107e577a94144a7e3e6bd7b70400.jpg",
            title: "万集科技校园招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/tmp/20220629/7ed83c93c56565294d57b1b5af9faba67646107e577a94144a7e3e6bd7b70400.jpg",
            content: "光学工程师(23届校招)等50个岗位",
            id: "5",
          },
          {
            img: "https://c-res.zhipin.com/jrs/c3352e648e5359e2bb3bed3705836ece.jpg",
            title: "柏特科技线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220615/b93206e5b50f9083b2cdddf23a27988352a8e09803d9395b6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL3VwbG9hZC9jb20vbG9nby8yMDIyMDYxNS83YjViNTU0ZDg0Zjk3MjljYjMyYWVhNDk4ZThkOGRmNzNhMGY3NzRmM2QxN2I1NjY2YmI2MWUzYjdiY2UwOTMxZGE1NzRkMTlkMWQ4MmM4OC5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsd18xOTIsbGltaXRfMC9yb3VuZGVkLWNvcm5lcnMscl8xOA==,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "前端开发工程师等2个岗位",
            id: "6",
          },
          {
            img: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20200117/693f94e1e346efc9b2f0eda3529e67a3b1ea43a176b8ca09613fe78b610be53c_s.jpg",
            title: "佑华法律线上招聘",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220705/b93206e5b50f9083f3d79777902071f12bcb60e764ad24d06bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAyMDAxMTcvNjkzZjk0ZTFlMzQ2ZWZjOWIyZjBlZGEzNTI5ZTY3YTNiMWVhNDNhMTc2YjhjYTA5NjEzZmU3OGI2MTBiZTUzY19zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "见习市场运营等25个岗位",
            id: "7",
          },
          {
            img: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20190729/f56fbce7667fa7eff86b1e8ed5f3cfc7e87192bfc9b589bc11f8a713c1e11684_s.jpg",
            title: "【校招】",
            banner:
                "https://img.bosszhipin.com/beijin/upload/school/live/20220705/b93206e5b50f90837c7fd7784394ba1bf5996774e12e1e106bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTA3MjkvZjU2ZmJjZTc2NjdmYTdlZmY4NmIxZThlZDVmM2NmYzdlODcxOTJiZmM5YjU4OWJjMTFmOGE3MTNjMWUxMTY4NF9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
            content: "注册/QA助理(北京)等15个岗位",
            id: "8",
          },
        ],
      ],
      foternav: [
        {
          id: "1",
          img: "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083707e7de4c647933a6873b34987c7d12e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTExMDgvZmUwN2E4OTBlOGYwNmQ3MTNiOTZkNTBhNDZiZWVhYzczNWNmMTRhMjMyMmM2OGUzNGMxMTNjYjhhMDRhNzFhMV9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
        },
        {
          id: "2",
          img: "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083707e7de4c647933a6873b34987c7d12e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTExMDgvZmUwN2E4OTBlOGYwNmQ3MTNiOTZkNTBhNDZiZWVhYzczNWNmMTRhMjMyMmM2OGUzNGMxMTNjYjhhMDRhNzFhMV9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
        },
        {
          id: "3",
          img: "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083707e7de4c647933a6873b34987c7d12e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTExMDgvZmUwN2E4OTBlOGYwNmQ3MTNiOTZkNTBhNDZiZWVhYzczNWNmMTRhMjMyMmM2OGUzNGMxMTNjYjhhMDRhNzFhMV9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
        },
        {
          id: "4",
          img: "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083707e7de4c647933a6873b34987c7d12e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTExMDgvZmUwN2E4OTBlOGYwNmQ3MTNiOTZkNTBhNDZiZWVhYzczNWNmMTRhMjMyMmM2OGUzNGMxMTNjYjhhMDRhNzFhMV9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
        },
        {
          id: "5",
          img: "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083707e7de4c647933a6873b34987c7d12e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTExMDgvZmUwN2E4OTBlOGYwNmQ3MTNiOTZkNTBhNDZiZWVhYzczNWNmMTRhMjMyMmM2OGUzNGMxMTNjYjhhMDRhNzFhMV9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
        },
        {
          id: "6",
          img: "https://img.bosszhipin.com/beijin/upload/school/live/20220707/b93206e5b50f9083707e7de4c647933a6873b34987c7d12e6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxOTExMDgvZmUwN2E4OTBlOGYwNmQ3MTNiOTZkNTBhNDZiZWVhYzczNWNmMTRhMjMyMmM2OGUzNGMxMTNjYjhhMDRhNzFhMV9zLmpwZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzE5MixsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_se,x_84,y_84/watermark,image_YmVpamluL2ljb24vMDYwYjQyZmRiZmU5NWJiNTBlN2E0MGEwYjMyMzUzYWI4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5qcGc=,g_sw,x_0,y_0",
        },
      ],

      sousuoinput: "",
      centerleft2: [
        {
          id: "01",
          label: "按专业筛选",
          children: [
            { title: "工学", path: "xxxxxx" },
            { title: "理学", path: "xxxxxx.xxxxxx.com" },
            { title: "经济学", path: "xxxxxx.xxxxxx.com" },
            { title: "管理学", path: "xxxxxx.xxxxxx.com" },
            { title: "法学", path: "xxxxxx.xxxxxx.com" },
            { title: "医学", path: "xxxxxx.xxxxxx.com" },
            { title: "教育学", path: "xxxxxx.xxxxxx.com" },
            { title: "历史学", path: "xxxxxx.xxxxxx.com" },
            { title: "材料学", path: "xxxxxx.xxxxxx.com" },
            { title: "农学", path: "xxxxxx.xxxxxx.com" },
            { title: "艺术学", path: "xxxxxx.xxxxxx.com" },
            { title: "哲学", path: "xxxxxx.xxxxxx.com" },
            { title: "文学", path: "xxxxxx.xxxxxx.com" },
          ],
        },
        {
          id: "02",
          label: "按职类筛选",
          children: [
            { title: "互联网技术/运营/产品", path: "xxxxxx" },
            { title: "", path: "xxxxxx" },
            { title: "设计/销售/房地产", path: "xxxxxx.xxxxxx.com" },
            { title: "", path: "xxxxxx" },
            { title: "人力/法律", path: "xxxxxx.xxxxxx.com" },
          ],
        },
      ],
      activeName: "01",
    };
  },
  created() {
    getNavData()
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err, "cou");
        });
  },
  components: {
    "my-header": myheader,
    "my-footer": myfooter,
  },
  methods: {
    onbtnb(val) {
      this.btnb = val === "1";
      // this.btnb = !this.btnb;
    },
    open() {
      this.$alert("弹窗，不写了", {
        dangerouslyUseHTMLString: true,
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    document
        .querySelector("body")
        .setAttribute("style", "background-color:#EEF0F5");
  },
};
</script>
<style lang="less" scoped>
.app {
  // margin: 0 auto;
  .test {
    text-align: center;
    color: red;
  }
  /deep/.wap_center {
    .btn1,
    .btn2 {
      margin: 0;
      border-radius: 0;
      width: 98px;
      height: 34px;
      text-align: center;
      line-height: 34%;
      // background: #ffff;
      border: none;
      color: black;
      font-size: 12px;
    }
    .btnb {
      background-color: aquamarine;
      color: #ffff;
    }
    .btnbhover:hover {
      background: #ffff;
      color: #5dd5c8;
    }
    .sousuo {
      box-sizing: border-box;
      width: 854px;
      height: 42px;
      // background: #757776;
      border: 1px solid #5dd5c8;
      margin: 0 auto;
      .sousuo_open {
        // box-sizing: border-box;
        width: 100px;
        height: 100%;
        // background: #e5e9f2;
        border-right: solid 1px black;

        .el-button {
          color: black;
        }
      }
      .sousuo_open_span {
        background: #fff;
        font-size: 13px;
        margin-left: 15%;
        color: black;
      }
      .sousuo_open_div {
        background: #fff;
      }
      .sousuo_input {
        float: left;
        width: 650px;
        height: 100%;
      }
    }

    .sousuo:hover {
      border: 1px solid #5dd5c8;
    }
    // .left_center {
    //   width: 100%;
    //   height: 100%;
    //   background: rgb(181, 16, 16);
    // }

    .searchBox {
      display: flex;
      width: 850px;
      box-shadow: 0 0 6px 0 rgb(0 0 0 / 13%);
      align-items: center;
      height: 50px;
      .pos {
        text-align: center;
        height: 50px;
        line-height: 50px;
        width: 110px;
        color: #61687c;
        font-size: 16px;
        background-color: white;
        i {
          margin-left: 20px;
        }
      }
      .searchInput {
        height: 48px;
        line-height: 48px;
        flex: 1;
        border: none;
        outline: none;
      }
      .searchBtn {
        height: 50px;
        line-height: 50px;
        width: 130px;
        text-align: center;
        color: #fff;
        background: #55cbc4;
        border: 0;
        cursor: pointer;
        &:hover {
          background-color: #6adbcf;
          color: #fff;
        }
      }
    }
    // .schollTabs{
    //
    //     padding-left: 10px;
    // }
  }
  // .banner_center {
  //   margin-top: 50px;
  //   .left_center {
  //     width: 100%;
  //     height: 340px;
  //     background: rgb(181, 16, 16);
  //   }
  // }
  .center_wap {
    width: 1186px;
    height: 338px;
    // background: #5dd5c8;
    margin-top: 80px;
    margin: 0 auto;
    .center_left {
      background: #fff;
      width: 285px;
      height: 100%;
      // background: #757776;
      // margin-right: 4px;
      float: left;
      li {
        left: 5px;
        float: left;
        width: 110px;
        height: 40px;
        padding-left: 10px;
        list-style: none;
        a {
          color: #000;
          text-decoration: none;
          font-size: 12px;
        }
      }
    }
    .center_center {
      float: left;
      width: 8px;
      height: 100%;
      // background: #eef0f5;
    }
    .center_right {
      width: 1186px;
      height: 100%;
      // background: #99a9bf;
    }
  }
  .sousuoinout {
    width: 1000px;
  }

  .app[data-v-05d4f95c] .wap_center .sousuo .sousuo_open_span {
    margin-left: 0 !important;
  }
  .center_wap2 {
    width: 1186px;
    height: 560px;
    margin: 0 auto;
    // background: rgb(158, 11, 11);
    .center_wap2-1 {
      width: 1186px;
      height: 104px;
      // background: #5dd5c8;
      h3 {
        line-height: 104px;
        font-size: 15px;
      }
    }
    .center_wap2-2 {
      width: 1186px;
      height: 456px;
      // background: #e5e9f2;
      .center_wap2-2-center {
        width: 285px;
        height: 224px;
        margin: 0 5.5px 5.5px 5.5px;
        background: pink;
        float: left;
        .wap2_center {
          height: 170px;
          width: 285px;
          // background: #5dd5c8;
        }
        .wap2_img {
          width: 54px;
          height: 54px;
          background: rgb(238, 6, 6);
          float: left;
        }
        .wap2_title {
          // float: right;
          width: 284px;
          height: 54px;
          background: white;
          h5 {
            font-size: 10px;
            width: 284px;
            margin: 0;
          }
          p {
            font-size: 8px;
          }
        }
      }
    }
  }
  .wap_center {
    margin: 0 auto;
  }
  .searchcontent {
    width: 1184px;
  }
  .remen {
    width: 1186px;
    height: 486px;
    // background: rgb(31, 192, 82);
    margin-top: 40px;
    .remen_1 {
      width: 1186px;
      height: 42px;
      // background: #99a9bf;
      h3 {
        width: 80px;
        // height: 36px;
        font-size: 16px;
        line-height: 20%;
        float: left;
      }
      .remen_btn {
        width: 82px;
        height: 36px;
        border: none;
      }
    }
    .remen_2 {
      width: 1186px;
      height: 450px;
      // background: #134c9b;
      .remen_title {
        width: 384px;
        height: 218px;
        margin: 0 5.5px 10px 5.5px;
        // background: #9b138b;
        float: left;
      }
    }
  }
}

.sousuotbn {
  height: 100%;
  width: 105px;
}
.sousuoinout {
  display: block;
  height: 100%;
  width: 100%;
  list-style: none;
  border: none;
}
/deep/.sousuoinout :hover {
  border: none;
}

.app .center_wap .center_left[data-v-fae5bece] {
  background: #ffff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

// 轮播图
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>